<template>
  <div style="">
    <div v-if="loading"
         style="position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
      <Loading size="24px" vertical>数据整理中...</Loading>
    </div>
    <div style="background: rgba(69,69,146,0.06);position: relative;" v-else>
      <div
          style="z-index:2;background-color: #fff;height: 58px;display: flex;align-items: center;position:fixed;width:100%;top:0;">
        <div @click="handleCalendarShow"
             style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 149px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;">
          <div style="width: 78%;display: flex;justify-content: center;align-items: center">
            {{ cal_label }}
          </div>
          <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
            <img :src="down_cc" style="width: 24px;height: 24px;"/>
          </div>
        </div>
        <div
            style="position: absolute;right: 20px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;">
          <img :src="Combined" style="width: 11.2px;height: 12px;">
          {{ buName }}
        </div>
      </div>
      <Overlay :show="fullCalendarShow" :z-index='2' @click.self="fullCalendarShow=false">
        <Calendar v-model="day" style="position: fixed;top:0px;"/>
      </Overlay>
      <div style="width: 100%;display: flex;background: #fff;border-radius: 0 0 20px 20px;margin-top:58px;">
        <div style="width: 80%;">
          <div style="padding:0px 10px 20px 28px;display: flex;flex-wrap: wrap;">
            <div
                style="margin-right:5px;width: 29px;height: 29px;display: flex;justify-content: center;align-items: center;font-family: PingFangSC-Regular;font-size: 14px;color: #666666;letter-spacing: 0.26px;text-align: justify;border-radius: 50%;"
                v-for="(item,index) in dayList" :key="index"
                :style="{background:day==item.day?'#31317E':'',color:day==item.day?'#fff':''}"
                @click="handleDayClick(item.day)">
              {{ item.idx }}
            </div>
          </div>
        </div>
        <div style="display: flex;flex-direction: row;width: 19%;padding-top:4px;">
          <div style="margin-right:20px;"><img :src="left_icon" style="width: 16px;height: 16px;"
                                               @click="changeWeek('preWeek')"></div>
          <div><img :src="right_icon" style="width: 16px;height: 16px;" @click="changeWeek('nextWeek')"></div>
        </div>
        <br/>
      </div>

      <van-tabs v-model="activeName" line-width="50%" color="#454592" title-active-color="#454592"
                line-height="2px"
                @change="tabChange">
        <van-tab title="总览" name="a" title-style="font-size: 16px;" style="min-height: 600px;">
          <div class="field_top" v-if="bu=='PC'||bu=='DBU'||bu=='CV'||bu=='SC'||bu=='CV&EP'">
            <div class="field_top_left"><img :src="warning" style="margin-top: 1px"/></div>
            <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
          </div>
          <div class="wrapper" v-if="bu=='PC'||bu=='DBU'||bu=='CV'||bu=='SC'||bu=='CV&EP'">

            <div class="field_item">
              <div style="padding:0 20px;">
                <div class="field_item_part">
                  <div class="field_item_part_title">
                    <div class="field_item_part_title_font">日均覆盖数
                      <div style="height: 100%;display: flex;align-items: center;"><img
                          :src="info"/></div>
                    </div>
                  </div>
                  <div style="margin-top:12px;position: relative;">
                    <van-progress :percentage="dayPercent>=4?100:(dayPercent/4)*100"
                                  stroke-width="10" pivot-text="1"
                                  track-color="rgba(255, 255, 255, 0.2)"
                                  pivot-color="#ffffff"
                                  color=" linear-gradient(-53deg, #EEEEFF 10%, #BCBCFB 24%, #9292F9 53%, #8282FA 81%, #8888F2 100%, #8888F2 100%)"/>
                    <div
                        style="margin-top:5px;opacity: 0.4;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      0
                    </div>
                    <div
                        style="position:absolute;right:0;top:14px;opacity: 0.4;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      {{ dayPercent > 4 ? dayPercent : 4 }}
                    </div>
                    <div
                        :style="{left:dayPercent>4?((4/dayPercent).toFixed(2)*100-5+'%'):((dayPercent/4).toFixed(2)*100-5  +'%')}"
                        style="position:absolute;top:14px;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      {{ dayPercent > 4 ? 4 : dayPercent }}
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding:0 20px;margin-top:20px;">
                <div class="field_item_part">
                  <div class="field_item_part_title">
                    <div class="field_item_part_title_font">月目标客户累计覆盖数
                      <div style="height: 100%;display: flex;align-items: center;"><img
                          :src="info"/></div>
                    </div>
                  </div>
                  <div style="margin-top:12px;position: relative;">
                    <van-progress :percentage="monthPercent>=30?100:(monthPercent/30)*100"
                                  stroke-width="10"
                                  pivot-text="1"
                                  pivot-color="#ffffff"
                                  track-color="rgba(255, 255, 255, 0.2)"
                                  color="linear-gradient(-53deg, #EEEEFF 10%, #BCBCFB 24%, #9292F9 53%, #8282FA 81%, #8888F2 100%, #8888F2 100%)"/>
                    <div
                        style="margin-top:5px;opacity: 0.4;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      0
                    </div>
                    <div
                        style="position:absolute;right:0;top:14px;opacity: 0.4;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      {{ monthPercent > 30 ? monthPercent : 30 }}
                    </div>
                    <div
                        :style="{left:monthPercent>30?((30/monthPercent).toFixed(2)*100+3+'%'):((monthPercent/30).toFixed(2)*100+3+'%')}"
                        style="position:absolute;top:14px;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.26px;text-align: justify;">
                      {{ monthPercent > 30 ? 30 : monthPercent }}
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div v-if="channel.length!=0">
              <div class="field_click" @click="showTable" v-if="tableShow">
                <div class="field_click_title">查看多渠道详情</div>
                <div class="field_click_icon"><img :src="down"/></div>
              </div>
              <div class="field_tab" v-if="closeTableShow">
                <div class="field_table">
                  <span class="field_table_title1">渠道</span>
                  <span class="field_table_title2">日均覆盖数</span>
                  <span class="field_table_title3">月目标客户累计覆盖数</span>
                </div>
                <div class="field_table_detail" v-for="(item,index) in channel" :key="index">
                  <span class="field_table_detail_title1">{{ item.channel }}</span>
                  <span class="field_table_detail_title2">{{ item.numMonAvgDailyEng }}</span>
                  <span class="field_table_detail_title3">{{ item.numMonTotCustCov }}</span>
                </div>

              </div>
              <div class="field_click_up" @click="closeTable" v-if="closeTableShow">
                <div class="field_click_title">收起多渠道详情</div>
                <div class="field_click_icon"><img :src="up"/></div>
              </div>
            </div>
            <div class="field_tooltip" style="position: relative;padding-bottom: 20px;">
              <div
                  style="padding-left:16px;padding-top:20px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                每日达成趋势
              </div>
              <div class="f2-tooltip f2-tooltip-day"></div>
              <canvas id="dayChartCanvas"></canvas>
              <div
                  style="position: absolute;top:55px;left:14px;font-family: PingFangSC-semibold;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;">
                (次)
              </div>
              <div
                  style="position: absolute;right:30px;bottom:10px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;">
                (日)
              </div>
            </div>
            <div class="field_tooltip" style="position: relative;padding-bottom: 20px;">
              <div
                  style="padding-left:16px;padding-top:20px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                每日达成趋势
              </div>
              <div class="f2-tooltip f2-tooltip-month"></div>
              <canvas id="monthChartCanvas"></canvas>
              <div
                  style="position: absolute;top:55px;left:14px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;">
                (次)
              </div>
              <div
                  style="position: absolute;right:30px;bottom:10px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;">
                (日)
              </div>
            </div>

          </div>
          <div class="field_top">
            <div class="field_top_left"><img :src="warning" style="margin-top: 1px"/></div>
            <div class="field_top_right">以下仅展现菲凡云代表应用相关数据</div>
          </div>
          <div style="padding:0 20px 20px 20px;">
            <div class="field_foot">
              <div class="field_foot_part">
                <div class="field_foot_view">
                  <div
                      style="padding-top:10px;padding-left: 15px;padding-bottom:6px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                    已认证医生
                  </div>
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasCertifi.count }}</span>
                    <span class="field_foot_view_top3">/{{ hasCertifi.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasCertifi.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_middle"></div>
              <div class="field_foot_part">
                <div class="field_foot_view">
                  <div
                      style="padding-top:10px;padding-left: 15px;padding-bottom:6px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                    已加微信认证医生
                  </div>
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasWxAdd.count }}</span>
                    <span class="field_foot_view_top3">/{{ hasWxAdd.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasWxAdd.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_part">
                <div class="field_foot_view">
                  <div
                      style="padding-top:10px;padding-left: 15px;padding-bottom:6px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                    投递数
                  </div>
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasSend.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasSend.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_middle"></div>
              <div class="field_foot_part">
                <div class="field_foot_view">
                  <div
                      style="padding-top:10px;padding-left: 15px;padding-bottom:6px;font-family: PingFangSC-semibold;font-size: 16px;color: #333333;letter-spacing: 0.3px;text-align: justify;line-height: 24px;">
                    打开率
                  </div>
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">本月打开率:</span>
                    <span class="field_foot_view_top2">{{ hasOpen.month }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日打开率:</span>
                    <span class="field_foot_view_bottom2">{{ hasOpen.day }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="HCP明细" name="b" title-style="font-size: 16px;" style="min-height: 77vh;">
          <div class="field_top">
            <div class="field_top_left"><img :src="warning" style="margin-top: 1px"/></div>
            <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
          </div>
          <div style="padding: 12px;display: flex;">
            <div class="condition">
              <div v-for="(item, index) in productList" :key="index"
                   :class="condition_selected==index?'condition_check':'condition_uncheck'"
                   :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',index%2?'border-top-right-radius:30px;border-bottom-right-radius:30px;':'border-top-left-radius:30px;border-bottom-left-radius:30px;'"
                   style="width:50%;height:100%;"
                   @click="conditionChange(index)">
                {{ item.name }}
              </div>
            </div>
            <div style="width:12%;display:flex;justify-content:center;align-items:center;">
              <img :src="search_icon" style="width:20px;height:20px;" @click="showSearchInput"/>
            </div>
            <div style="width: 12%;display: flex;justify-content: center;align-items: center;position: relative;">
              <img :src="filter_icon" style="width:20px;height:20px;" @click="openFilter"/>
              <div style="color:rgb(69, 69, 146);position: absolute;width: 14px;
              height: 14px;border-radius: 50%;top:3px;right:-7px;border:1px solid rgb(69, 69, 146);display: flex;
              justify-content: center;align-items: center;font-size: 12px;" v-if="selectCount>0">
                {{ selectCount }}
              </div>
            </div>
          </div>
          <div v-if="!filter_window">
            <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
            <div style="display: flex;flex-direction: row;" v-if="search_input_visible">
              <div class="search">
                <img :src="search_icon" @click="clickSearch"/>
                <form action="javasearchTextscript:void 0" style="display: flex;">
                  <input class="input" @input="inputSearch($event)" :value="searchText" type="search"
                         @keyup.13="clickSearch"
                         placeholder="搜索医生"/>
                  <img :src="close_icon" style="width: 20px;height:20px;" v-if="searchText" @click="searchText=''"/>
                </form>
              </div>
              <div class="cancel" @click="hideSearchInput">
                取消
              </div>
            </div>
            <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
            <div class="field_tab">
              <div class="field_table">
              <span class="field_table_title1">
                <span style="margin-left: 4px;">姓名</span>
              </span>
                <span class="field_table_title2">有效覆盖数</span>
                <span class="field_table_title3">详情</span>
              </div>
              <div class="field_table_detail" v-for="(item,index) in list" :key="index">
              <span class="field_table_detail_title1">
                <span style="width: 8px;margin-right: 4px;height: 100%;display: flex;" v-if="item.certi==1">
                  <img :src="star_icon" style="width: 8px;height: 8px;"/>
                </span>
                <span>{{ item.name }}</span>
                <span style="width: 8px;height: 100%;margin-left: 4px;display: flex;" v-if="item.wxCerti==1">
                  <img :src="wechat_icon" style="width: 18px;height: 18px;"/>
                </span>
              </span>
                <span v-if="condition_selected==0">
                    <span class="field_table_detail_title2">{{ item.daycount }}</span>
                </span>
                <span v-else>
                    <span class="field_table_detail_title2">{{ item.mouthcount }}</span>
                </span>
                <span class="field_table_detail_title3" @click="JumpDetail(item.hcpEtmsId)">
                <img :src="arrow_right"
                     style="width: 16px;height: 16px;"/> </span>
              </div>
            </div>
          </div>
          <div v-if="filter_window" style="width: 100%;height: 65vh;z-index:3;">
            <div style="padding: 8px 20px 0px;">
              <div class="title_top">
                <div class="titleicon"></div>
                <div class="title_right" style="display: flex;align-items: center;">客户状态
                  <img :src="star_icon" style="padding-left:10px;width: 8px;height: 8px;"/>
                </div>
              </div>
              <div class="screenList">
                <div v-for="(item, index) in certiList" :key="index" @click="selectCerti(index)"
                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                     class="screen_item">
                  {{ item.name }}
                </div>
              </div>

            </div>
            <div style="padding: 8px 20px 0px;">
              <div class="title_top">
                <div class="titleicon"></div>
                <div class="title_right" style="display: flex;align-items: center;">是否加微信
                  <img :src="wechat_icon" style="padding-left:10px;width: 18px;height: 18px;"/>
                </div>
              </div>
              <div class="screenList">
                <div v-for="(item, index) in certiWxList" :key="index" @click="selectWxCerti(index)"
                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                     class="screen_item">
                  {{ item.name }}
                </div>
              </div>

            </div>
            <!--            <div style="padding: 8px 20px 0px;">-->
            <!--              <div class="title_top">-->
            <!--                <div class="titleicon"></div>-->
            <!--                <div class="title_right" style="display: flex;align-items: center;">医生分组-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <div class="screenList">-->
            <!--                <div v-for="(item, index) in doctorList" :key="index" @click="selectDoctor(index)"-->
            <!--                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"-->
            <!--                     class="screen_item">-->
            <!--                  {{ item.name }}-->
            <!--                </div>-->
            <!--              </div>-->

            <!--            </div>-->
            <div style="position: fixed;z-index: 9999;bottom: 0;width: 100%;">
              <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 20px;">
                <div class="button" @click="closeFilter"
                     :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">取消
                </div>
                <div class="button" @click="doFilter"
                     :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">查看
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <!--        <van-tab title="HCP明细" name="b" title-style="font-size: 16px;">-->
        <!--          <div style="width: 100%;height: 78vh;display: flex;justify-content: center;font-family: PingFangSC-Semibold;font-size: 16px;color: #454592;letter-spacing: 0.3px;-->
        <!--text-align: justify;line-height: 24px;">-->
        <!--            <div style="margin-top:150px;display: flex;justify-items: center;align-items: center;flex-direction: column;">-->
        <!--              <img :src="unrelease" style="width: 261.6px;height: 177.6px"/>-->
        <!--              <div style="margin-top:19.4px;">-->
        <!--                即将上线！敬请期待！-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </van-tab>-->
      </van-tabs>
    </div>
  </div>

</template>

<script>

import Vue from 'vue';
import {Loading} from 'vant';
import left_icon from '@assets/icon/chevron_left.svg'
import right_icon from '@assets/icon/chevron_right.svg'
import search_icon from '@assets/icon/search.svg'
import filter_icon from '@assets/icon/21.svg'
import arrow_right from '@assets/icon/arrow_right.svg'
import star_icon from '@assets/icon/star.svg'
import wechat_icon from '@assets/icon/wechat.svg'

import dayjs from 'dayjs'
import F2 from '@antv/f2'

import _ from 'lodash';
import down_cc from '@assets/icon/34.svg'
import unrelease from '@assets/image/coming_soon.png'
import {
  Tab,
  Tabs,
  Circle,
  Overlay,
  Progress
} from 'vant';
// Vue.use(infiniteScroll)
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Circle)
Vue.use(Progress)
import Combined from '@assets/icon/Combined Shape.svg'
import warning from '@assets/icon/warning.svg'
import info from '@assets/icon/16.svg'
import right from '@assets/icon/right.svg'
import down from '@assets/icon/down.svg'
import up from '@assets/icon/up.svg'
import Calendar from '@components/snfDashboardCalendar'
import close_icon from '@assets/icon/close.svg';
import {DaibiaiReport, get430, getHcpDetail} from '@api/schedule'
import env from "@config/env";

const monthList = ['01', '05', '10', '15', '20', '25', '30']

export default {
  name: "BU",
  components: {
    Tab,
    Tabs,
    Calendar,
    Loading,
    Overlay
  },
  data() {
    return {
      close_icon: close_icon,
      searchText: '',
      search_input_visible: false,
      filter_window: false,
      clientWidth: document.documentElement.clientWidth, // 页面宽度
      certiList: [
        {
          name: '已认证',
          code: 1,
          select: false,
        },
        {
          name: '未认证',
          code: 0,
          select: false,
        },
      ],
      certiWxList: [
        {
          name: '已加微信',
          code: 1,
          select: false,
        },
        {
          name: '未加微信',
          code: 0,
          select: false,
        },
      ],
      doctorList: [
        {
          name: '全部',
          select: false,
        },
        {
          name: '分组一',
          select: false,
        },
        {
          name: '分组二',
          select: false,
        },
      ],
      wechat_icon: wechat_icon,
      star_icon: star_icon,
      arrow_right: arrow_right,
      list: [],
      filter_icon: filter_icon,
      search_icon: search_icon,
      condition_selected: 0,
      productList: [
        {
          name: '当日明细',
        },
        {
          name: '月累计明细',
        }
      ],
      dayChartCanvas: null,
      monthChartCanvas: null,
      Combined: Combined,
      buName: sessionStorage.getItem('email'),
      bu: sessionStorage.getItem('bu'),
      cal_label: '',
      unrelease: unrelease,
      fullCalendarShow: false,
      loading: true,
      left_icon: left_icon,
      right_icon: right_icon,
      dayList: [],
      down_cc: down_cc,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeName: 'a',
      activeNames: ['1'],
      info: info,
      right: right,
      warning: warning,
      down: down,
      up: up,
      current_num: 100,
      month_num: 100,
      current_rate: 10,
      month_rate: 20,
      day: '',
      tableShow: true,
      closeTableShow: false,
      gradientColor: {
        '2%': '#EEEEFF',
        '17%': '#BCBCFB',
        '49%': '#9292F9',
        '80%': '#8282FA',
        '100%': '#8888F2',
      },
      hasCertifi: {
        total: 0,
        count: 0,
        incre: 0
      },
      hasWxAdd: {
        total: 0,
        count: 0,
        incre: 0
      },
      hasSend: {
        total: 0,
        incre: 0
      },
      hasOpen: {
        month: '0%',
        day: '0%'
      },
      dayPercent: 0,
      monthPercent: 0,
      channel: [],
      dayChartData: [],
      monthChartData: [],
      weekDay: ''
    };
  },
  methods: {
    JumpDetail(hcpEtmsId) {
      let url = env.ONE_STEP_SEND + hcpEtmsId
      window.location.href = url

    },
    //点击放大镜 根据筛选条件查询数据
    clickSearch() {
      this.list = [];
      this.gethcp();
    },
    // 输入搜索条件
    inputSearch(e) {
      this.searchText = e.currentTarget.value
    },
    showSearchInput() {
      this.search_input_visible = true
    },
    hideSearchInput() {
      this.search_input_visible = false
    },
    doFilter() {
      //TODO 调用接口查询数据
      this.filter_window = false
      this.list = [];
      this.gethcp();
    },
    openFilter() {
      this.filter_window = !this.filter_window
    },
    closeFilter() {
      this.filter_window = false
    },
    selectDoctor(index) {
      this.doctorList[index].select = !this.doctorList[index].select
    },
    selectWxCerti(index) {
      this.certiWxList[index].select = !this.certiWxList[index].select
    },
    selectCerti(index) {
      this.certiList[index].select = !this.certiList[index].select
    },
    conditionChange(index) {
      this.condition_selected = index
    },
    handleCalendarShow() {
      this.fullCalendarShow = !this.fullCalendarShow
    },
    tabChange(name, title) {

    },
    groupMonthChartRender() {
      if (this.monthChartCanvas) {
        this.monthChartCanvas.changeData(this.monthChartData)
        return
      }
      let self = this
      const data = this.monthChartData
      let c_height = document.getElementsByClassName('field_tooltip')[0].offsetHeight
      let c_width = document.getElementsByClassName('field_tooltip')[0].offsetWidth
      this.monthChartCanvas = new F2.Chart({
        id: 'monthChartCanvas',
        width: c_width,
        height: c_height,
        pixelRatio: window.devicePixelRatio,
      });
      this.monthChartCanvas.source(data, {
        count: {
          ticks: [0, 10, 20, 30, 40],
        }
      });
      // 设置图例居中显示
      this.monthChartCanvas.legend({
        position: 'top',
        align: 'right',
        itemWidth: null,// 图例项按照实际宽度渲染
        custom: true,
        nameStyle: {
          fontSize: 14
        },
        items: [
          {
            name: '月目标客户累计覆盖数',
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r, y);
              ctx.lineTo(x + r, y);
              ctx.stroke();
              ctx.fill();
            },
            fill: '#ACB318',
            checked: true
          },
        ]
      });
      this.monthChartCanvas.tooltip({
        showCrosshairs: true,
        custom: true, // 自定义 tooltip 内容框
        layout: 'vertical',
        onChange: function onChange(ev) {
          const tooltipEl = $('.f2-tooltip-month');
          const currentData = ev.items;
          const text = currentData.value;
          tooltipEl.html([
            `<div style="margin:8px 0 0 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">${currentData[0].origin.time.replace('-/g', '/')}</div>`,
            `<div style="margin:0px 0 8px 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">月目标客户累计覆盖数:${currentData[0].origin.count}</div>`,
          ].join(''));
          // tooltipEl.html([ '<span>' + currentData.origin.date + '</span>', '<span>Web Visits: <b>' + text + '</b></span>' ].join(''));
          const canvasOffsetTop = $('#monthChartCanvas').position().top;
          const canvasOffsetLeft = $('#monthChartCanvas').position().left;
          tooltipEl.css({
            width: '174px',
            background: 'linear-gradient(248deg, #AFB34F 0%, #949917 95%)',
            borderRadius: '4px',
            opacity: '0.75',
            display: 'flex',
            flexDirection: 'column',
            justifyItems: 'center',
            left: canvasOffsetLeft + currentData[0].x / 2 - tooltipEl.outerWidth() / 100 + 'px',
            top: canvasOffsetTop + currentData[0].y - tooltipEl.outerHeight() - 20 + 'px'
          });
        },
        onHide: function onHide() {
          const tooltipEl = $('.f2-tooltip-month');
          tooltipEl.css({
            opacity: 0,
            display: 'flex',
            flexDirection: 'column',
            justifyItems: 'center'
          });
        }

      });
      this.monthChartCanvas.axis('time', {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          let t = text.split('-')[2]
          if (self.monthChartData.length > 4) {
            textCfg.text = monthList.includes(t) ? t : ''
          } else {
            textCfg.text = t
          }
          return textCfg;
        }
      });
      this.monthChartCanvas.axis('count', {
        label: function label(text) {
          const number = parseInt(text);
          const cfg = {};
          if (number == 30) {
            cfg.fill = '#ACB318'
          } else {
            cfg.fill = '#333'
          }
          return cfg;
        }
      })
      this.monthChartCanvas.area()
          .position('time*count')
          .color('momo', type => {
            return 'l(-90) 0:#fff 1:#D6DA35'
          })
          .adjust('stack');
      this.monthChartCanvas.line()
          .position('time*count')
          .color('momo', type => {
            return '#ACB318'
          })
          .adjust('stack');
      this.monthChartCanvas.render();
    },
    groupDayChartRender() {
      if (this.dayChartCanvas) {
        this.dayChartCanvas.changeData(this.dayChartData)
        return
      }
      let self = this
      const data = this.dayChartData
      let c_height = document.getElementsByClassName('field_tooltip')[0].offsetHeight
      let c_width = document.getElementsByClassName('field_tooltip')[0].offsetWidth
      this.dayChartCanvas = new F2.Chart({
        id: 'dayChartCanvas',
        width: c_width,
        height: c_height,
        pixelRatio: window.devicePixelRatio,
      });
      this.dayChartCanvas.source(data, {
        count: {
          ticks: [0, 2, 4, 6, 8],

        }
      });
      // 设置图例居中显示
      this.dayChartCanvas.legend({
        position: 'top',
        align: 'right',
        itemWidth: null,// 图例项按照实际宽度渲染
        custom: true,
        nameStyle: {
          fontSize: 14
        },
        items: [
          {
            name: '日均覆盖数',
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r, y);
              ctx.lineTo(x + r, y);
              ctx.stroke();
              ctx.fill();
            },
            fill: '#8888F2',
            checked: true
          },
        ]
      });
      this.dayChartCanvas.tooltip({
        showCrosshairs: true,
        custom: true, // 自定义 tooltip 内容框
        layout: 'vertical',
        onChange: function onChange(ev) {
          const tooltipEl = $('.f2-tooltip-day');
          const currentData = ev.items;
          const text = currentData.value;
          tooltipEl.html([
            `<div style="margin:8px 0 0 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">${currentData[0].origin.time.replace('-/g', '/')}</div>`,
            `<div style="margin:0px 0 8px 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">日均覆盖数:${currentData[0].origin.count}</div>`,
          ].join(''));
          // tooltipEl.html([ '<span>' + currentData.origin.date + '</span>', '<span>Web Visits: <b>' + text + '</b></span>' ].join(''));
          const canvasOffsetTop = $('#dayChartCanvas').position().top;
          const canvasOffsetLeft = $('#dayChartCanvas').position().left;
          tooltipEl.css({
            background: ' linear-gradient(-20deg, #5E5EC5 0%, #2F2F8E 72%)',
            borderRadius: '4px',
            opacity: '0.75',
            display: 'flex',
            flexDirection: 'column',
            justifyItems: 'center',
            left: canvasOffsetLeft + currentData[0].x / 2 - tooltipEl.outerWidth() / 100 + 'px',
            top: canvasOffsetTop + currentData[0].y - tooltipEl.outerHeight() - 20 + 'px'
          });
        },
        onHide: function onHide() {
          const tooltipEl = $('.f2-tooltip-day');
          tooltipEl.css({
            opacity: 0,
            display: 'flex',
            flexDirection: 'column',
            justifyItems: 'center',
          });
        }

      });
      this.dayChartCanvas.axis('time', {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          let t = text.split('-')[2]
          if (self.dayChartData.length > 4) {
            textCfg.text = monthList.includes(t) ? t : ''
          } else {
            textCfg.text = t
          }
          return textCfg;
        }
      });
      this.dayChartCanvas.axis('count', {
        label: function label(text) {
          const number = parseInt(text);
          const cfg = {};
          if (number == 4) {
            cfg.fill = '#6767C9'
          } else {
            cfg.fill = '#333'
          }
          return cfg;
        }
      })
      this.dayChartCanvas.line()
          .position('time*count')
          .color('l(180) 0:#1890FF 1:#f7f7f7');
      this.dayChartCanvas.area()
          .position('time*count')
          .color('momo', type => {
            return 'l(-90) 0:#fff 1:#1890FF'
          })
          .adjust('stack');
      this.dayChartCanvas.render();
    },
    showTable() {
      this.tableShow = false
      this.closeTableShow = true
    },
    closeTable() {
      this.tableShow = true
      this.closeTableShow = false
    },
    getWeekDay() {

      this.dayList = []
      let weekStart = dayjs(this.weekday).startOf('week').format('YYYY-M-D')

      for (let i = 0; i < 7; i++) {
        this.dayList.push({
          idx: dayjs(weekStart).add(i, 'day').format('D'),
          day: dayjs(weekStart).add(i, 'day').format('YYYY-M-D')
        })
      }

    },
    changeWeek(type) {
      switch (type) {
        case 'preWeek': {
          this.weekday = dayjs(this.weekday).subtract(7, 'day').format('YYYY-M-D')
          this.getWeekDay()
          break
        }
        case 'nextWeek': {
          this.weekday = dayjs(this.weekday).add(7, 'day').format('YYYY-M-D')
          this.getWeekDay()
          break
        }

      }
    },
    handleDayClick(day) {
      this.day = day
      this.buCardData()
    },
    buCardData() {
      DaibiaiReport({time: dayjs(this.day).format('YYYY-MM-DD')}).then(res => {
        if (res.successful) {
          if (res.data) {
            this.hasCertifi.total = res.data.numTgtHcp
            this.hasCertifi.count = res.data.numOpCertHcp
            this.hasCertifi.incre = res.data.numOpCertHcpAdd
            this.hasWxAdd.total = res.data.numTgtHcp
            this.hasWxAdd.count = res.data.numOpCertCotHcp
            this.hasWxAdd.incre = res.data.numOpCertCotHcpAdd
            this.hasSend.total = res.data.numSendMtd
            this.hasSend.incre = res.data.numSendDtd
            this.hasOpen.month = (res.data.numContentOpenMtd / res.data.numContentMtd).toFixed(2) * 100 + '%'
            this.hasOpen.day = (res.data.numContentOpenDtd / res.data.numContentDtd).toFixed(2) * 100 + '%'
          } else {
            alert('云代表数据未同步！')
          }
        } else {
          alert('获取菲凡云代表相关数据失败！')
        }
      })
    },
    get430() {
      this.monthChartData = []
      this.dayChartData = []
      get430({
        dayOfMonthFirst: dayjs(this.day).startOf('month').format('YYYY-MM-DD'),
        dayOfMonthLast: dayjs(this.day).endOf('month').format('YYYY-MM-DD'),
        currentDay: dayjs(this.day).format('YYYY-MM-DD')
      }).then(res => {
        if (res.successful) {
          if (res.data) {
            this.dayPercent = res.data.numMonAvgDailyEng
            this.monthPercent = res.data.numMonTotCustCov
            this.channel = res.data.channels
            res.data.daily.map(item => {
              this.dayChartData.push({
                count: item.numMonAvgDailyEng,
                momo: '投递',
                time: item.day
              })
              this.monthChartData.push({
                count: item.numMonTotCustCov,
                momo: '投递',
                time: item.day
              })
            })
          } else {
            alert('云代表数据未同步')
          }
        } else {
          alert('获取430数据失败！')
        }
      })
    },
    gethcp() {
      let certCode = "";
      this.certiList.forEach((item, idx) => {
        if (item.select == true) {
          certCode = item.code;
        }
      })
      if (this.certiList[0].select == true && this.certiList[1].select == true) {
        certCode = "";
      }

      let certWXCode = "";
      this.certiWxList.forEach((item, idx) => {
        if (item.select == true) {
          certWXCode = item.code;
        }
      })
      if (this.certiWxList[0].select == true && this.certiWxList[1].select == true) {
        certWXCode = "";
      }

      let dayTime = dayjs(this.day).format('YYYY-MM-DD');
      //组装参数
      let param = {
        email: this.buName,
        dmEmail: '',
        day: dayTime,
        hcpName: this.searchText,
        ifCerHcp: certCode,
        ifCotHcp: certWXCode
        // email:'feng.hu@sanofi.com',
        // dmEmail:'',
        // day:'2020-9-28',
        // hcpName:'',
        // ifCerHcp:0,
        // ifCotHcp:0
      }
      getHcpDetail(param).then(res => {
        if (res.successful == true) {
          for (let i = 0; i < res.data.length; i++) {
            for (let j = 0; j < res.data[i].detailList.length; j++) {
              this.list.push({
                name: res.data[i].detailList[j].hcpName,
                daycount: res.data[i].detailList[j].numDtdTotEngage,
                mouthcount: res.data[i].detailList[j].numMonTotEngage,
                certi: res.data[i].detailList[j].ifCerHcp,
                wxCerti: res.data[i].detailList[j].ifCotHcp,
                hcpEtmsId: res.data[i].detailList[j].hcpEtmsId
              });
            }
          }
        }
      })
    },
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
      this.day = dayjs().subtract(1, 'day').format('YYYY-M-D')
      this.weekday = this.day
      this.getWeekDay()
    }, 1000)

  },
  watch: {
    day(newval, oldval) {
      this.dayChartData = []
      this.monthChartData = []
      this.fullCalendarShow = false
      this.weekday = newval
      this.getWeekDay()
      this.buCardData()
      if (this.bu == 'PC' || this.bu == 'DBU' || this.bu == 'CV' || this.bu == 'SC' || this.bu == 'CV&EP') {
        this.get430()
      }
      this.gethcp();
      let self = this
      this.cal_label = dayjs(newval).format('YYYY/MM')
      setTimeout(function () {
        self.groupDayChartRender()
        self.groupMonthChartRender()
      }, 500)
    }
  },
  computed: {
    selectCount() {
      let c_count = this.certiList.filter(item => item.select).length
      let w_count = this.certiWxList.filter(item => item.select).length
      let d_count = this.doctorList.filter(item => item.select).length
      return c_count + w_count + d_count
    }
  }
}
</script>

<style scoped lang="scss">
input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  height: 36px;
  border-radius: 3px;
}

.screenList {
  display: flex;
  flex-wrap: wrap;
}

.screen_item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 16px;
  margin: 0 8px 8px 0;
  font-size: 12px;
  color: #666666;
  border: 1px solid #666666;
  border-radius: 20px;
}

.list_item {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.title_top {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 14px 0 14px;
}

.titleicon {
  height: 20px;
  width: 4px;
  background: #ACB318;
  margin-right: 8px;
}

.cancel {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ACB318;
  letter-spacing: 0.26px;
  text-align: justify;
  line-height: 16px;
  display: flex;
  align-items: center;
}

.input {
  flex: 1;
  width: 250px;
  border-width: 0;
  background: none;
  margin-left: 5px;
  color: #666666;
  opacity: 0.6;
  font-size: 14px;
}

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 12px;
  width: 85%;
  height: 45px;
}

.condition {
  font-family: PingFangSC-Regular;
  display: flex;
  flex-direction: row;
  flex: 2;
  max-width: 76%;
  height: 30px;
  border: 1px solid #454592;
  border-radius: 30px;
  font-size: 12px;

}

.condition_uncheck {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.condition_check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #454592;
  background: rgba(69, 69, 146, 0.1);
}


.wrapper {
  padding: 12px;
}

.field_top {
  width: 100%;
  height: 24px;
  background: rgba(69, 69, 146, 0.06);
  margin-top: 1.2%;
}

.field_top_left {
  margin-left: 5.3%;
  float: left;
  margin-top: 3px;
}

.field_top_right {
  float: left;
  margin-left: 0.4%;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 24px;
}

.title {
  width: 100%;
  height: 24px;
}

.title_block {
  background: #ACB318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.title_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 12px;
  float: left;
}

.title_detail {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ACB318;
  letter-spacing: 0.26px;
  text-align: center;
  float: right;
}

.field_item {
  width: 100%;
  height: 212px;
  box-shadow: 2px 4px 10px 0 rgba(38, 38, 98, 0.30);
  background-image: linear-gradient(#5656B5, #31317E);
  border-radius: 4px 4px 0px 0px;
  margin-top: 0.8%;
  display: flex;
  flex-direction: column;
}

.field_item_part {
  width: 100%;

}

.field_item_part_title {
  margin-top: 15px;
}

.field_item_part_title_font {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  display: flex;
  align-items: center;
  height: 24px;
}

.field_item_part_title_icon {
  margin-top: 4px;
  margin-left: 5px;
}

.field_click {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848B4, #7F7FDD);
  border-radius: 0 0 4px 4px;
}

.field_click_title {
  width: 100%;
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.26px;
  text-align: center;
  padding-top: 7px;
}

.field_click_icon {
  width: 100%;
  text-align: center;
}

.slot1 {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: 0.6px;
  line-height: 48px;
  margin-top: 25px;
  text-align: center;
}

.slot2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.22px;
  text-align: center;
  margin-top: 3px;
}

.slot3 {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.26px;
  text-align: center;
  margin-top: 3px;
}

.field_tooltip {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
  border-radius: 4px;
}

.field_foot {
  width: 100%;
  height: 260px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.field_foot_part {
  width: 48%;
  float: left;
}

.field_foot_part_title {
  width: 100%;
  height: 22px;
  position: relative;
}

.field_foot_part_block {
  background: #ACB318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.field_foot_part_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 7px;
  float: left;
}

.field_foot_part_icon {
  float: right;
  position: absolute;
  right: 0;
}

.field_foot_view {
  width: 100%;
  height: 106px;
  background: #FFFFFF;
  margin-top: 10px;
  border-radius: 4px;
}

.field_foot_view_top {
  padding-left: 15px;
}

.field_foot_view_top1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_top2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_view_top3 {
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 16px;
}

.field_foot_view_bottom {
  padding-top: 5px;
  padding-left: 15px;
}

.field_foot_view_bottom1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_bottom2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_middle {
  width: 4%;
  float: left;
  height: 80px;
}

.field_foot_part_icon {
  margin-top: 2px;
}

.field_tab {
  padding: 0 8px;
}

.field_table {
  width: 100%;
  //height: 40px;
  height: 60px;
}

.field_table_title1 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_title2 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_title3 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_detail {
  width: 100%;
  height: 40px;
  background: #ffffff;
  margin-bottom: 8px;
  box-shadow: 0 4px 8px 0 rgba(49, 49, 126, 0.06);
  border-radius: 4px;
}

.field_table_detail_title1 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.field_table_detail_title2 {
  width: 40%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: block;
  float: left;
}

.field_table_detail_title3 {
  width: 15%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  float: left;
}

.field_click_up {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848B4, #7F7FDD);
  border-radius: 0 0 4px 4px;
}

/deep/ .van-tab {
  background: rgba(69, 69, 146, 0.06) !important;
}

.chart-wrapper {
  position: relative;
}

.f2-tooltip {
  -moz-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  position: absolute;
  z-index: 99;
  background-color: #1890ff;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  width: 120px;
  opacity: 0;
}


.f2-tooltip div {
  display: block;
  color: #fff;
}

.f2-tooltip div:nth-child(1) {
  font-size: 11px !important;
}

.f2-tooltip div:nth-child(2) {
  font-size: 13px !important;
}

/deep/ .van-progress__pivot {
  color: transparent !important;
}

/deep/ .van-progress__portion {
  box-shadow: 0 6px 6px 0 rgba(134, 134, 243, 0.50);
}
</style>